<template>
  <div>
    <!-- 根节点 -->
    <div>
      <!-- 查询条件组件 -->
      <div>
        <el-form :model="search" label-width="auto" style="width: 100%">
          <el-row>
            <el-col :span="5">
              <el-form-item label="客户公司">
                <el-input v-model="search.company" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="联系人">
                <el-input v-model="search.contacts" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="邮箱">
                <el-input v-model="search.email" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="感兴趣的产品">
                <el-input v-model="search.products" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <el-form-item label="国家">
                <el-input v-model="search.country" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="市场">
                <el-input v-model="search.market" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="客户分类">
                <el-input v-model="search.segmentation" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="客户类型">
                <el-input v-model="search.cType" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <el-form-item label="所属销售">
                <el-input v-model="search.saleId" />
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-button type="primary" round @click="initData()">查询</el-button>
              <el-button type="primary" round @click="clear()">重置</el-button>
            </el-col>
            <el-col :span="12">
              <el-button type="primary" round @click="add()" style="margin-left:100% ;">添加用户</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!--数据内容展示 -->
      <div>
        <el-table :data="table" stripe style="width: 100%">
          <el-table-column prop="company" label="客户公司名称" width="120" header-align="center" align="center" />
          <el-table-column prop="contacts" label="联系人" width="80" header-align="center" align="center" />
          <el-table-column prop="phone" label="联系方式" width="120" header-align="center" textAlign="center"
            align="center" />
          <el-table-column prop="market" label="市场" width="80" header-align="center" align="center" />
          <el-table-column prop="customerType" label="客户类型" width="80" header-align="center" align="center" />
          <el-table-column prop="email" label="邮箱" width="100" header-align="center" align="center" />
          <el-table-column prop="createdTime" label="创建时间" width="120" header-align="center" align="center" />
          <el-table-column prop="saleId" label="所属销售" width="80" header-align="center" align="center" />
          <el-table-column prop="source" label="来源" width="80" header-align="center" align="center" />
          <el-table-column label="操作" header-align="center">
            <template #default="scope">
              <el-button type="primary" :icon="Edit" title="编辑" @click="eidt(scope.row)" >编辑</el-button>
              <el-button type="primary" :icon="Edit" title="出货记录" @click="SH()" >出货记录</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 页码 -->
      <div>
        <el-pagination background layout="total, prev, pager, next, sizes" :total="total" :page-size="search.pageSize"
          :current-page="search.page" :page-sizes="[1, 4, 8, 10, 20]" @size-change="chgSize"
          @current-change="chgPage" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import {Edit} from "@element-plus/icons-vue";
import { queryCustomerList } from "@/api/customer.ts";
import { useRouter, useRoute } from "vue-router";
import { useUserStoreHook} from "@/store/modules/user.ts"

//钩子函数
onMounted(() => {
  initData();
});
//定义路由跳转和接收
var router = useRouter();
var route = useRoute();
//页面跳转--出货记录
function SH(){
  router.push({name:"customerSH"})
}

//测试接收数据
// console.log(route.query);
//客户添加
function add(){
  router.push({name:"customerAdd"})
}
//客户编辑
function eidt(row) {
  //得到了行的所有属性值
  // console.log(row);
  //通过打点调用可以得到具体属性值
  // console.log(row.id);
  router.push({
    name: "customerEide",
    query: { id: row.id }
  });
}

//页码发生变化
function chgPage(page) {
  search.value.page = page;
  initData();
}

//每页显示条数发生变化
function chgSize(size) {
  search.value.pageSize = size;
  console.log(search.value);
  initData();
}

//重置查询条件
function clear() {
  search.value = {
    page: 1,
    pageSize: 4,
    account: "",
    address: "",
    boss: "",
    bossEmail: "",
    bossPhone: "",
    company: "",
    companyProfile: "",
    consistent: "",
    contacts: "",
    country: "",
    courierAddress: "",
    createdAt: "",
    cType: "",
    destination: "",
    email: "",
    id: "",
    interestProduct: "",
    isDeleted: "",
    market: "",
    model: "",
    password: "",
    phone: "",
    productId: "",
    products: "",
    saleId: "",
    segmentation: "",
    source: "",
    status: "",
    targetPort: "",
    type: "",
    updatedAt: "",
    verifyPhone: ""
  };
  initData();
}

//总条数
const total = ref(0);

//获取展示数据
const table = ref([]);

//查询条件
const search = ref({
  page: 1,
  pageSize: 4,
  account: "",
  address: "",
  boss: "",
  bossEmail: "",
  bossPhone: "",
  company: "",
  companyProfile: "",
  consistent: "",
  contacts: "",
  country: "",
  courierAddress: "",
  createdAt: "",
  customerType: "",
  destination: "",
  email: "",
  id: "",
  interestProduct: "",
  isDeleted: "",
  market: "",
  model: "",
  password: "",
  phone: "",
  productId: "",
  products: "",
  saleId: "",
  segmentation: "",
  source: "",
  status: "",
  targetPort: "",
  type: "",
  updatedAt: "",
  verifyPhone: ""
});

//查询用户
async function initData() {
  //看看查询条件是什么
  // console.log(search.value);
  let res = await queryCustomerList(JSON.stringify(search.value));
  //对象接收数据
  table.value = res.data.data;
  //总条数
  // console.log(res.data.total);
  total.value = res.data.total;
  //获取token信息
  const user = useUserStoreHook().username
  console.log(user)
  
}

</script>

<style scoped>
.el-pagination {
  border: 1px solid #dcdfe5;
  margin-top: 50px;
  padding-left: 300px;
}

.el-col {
  margin-right: 20px;
}
.el-form {
  margin: 15px;
}
</style>
